<template>
  <q-page class="bg-grey-2 q-pa-md">
    <div class="row q-col-gutter-md">
      <template
        v-for="(account, id) in $store.state.persisted.accounts"
        :key="id"
      >
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <account-item v-bind="account"></account-item>
        </div>
      </template>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card flat class="full-height column">
          <q-card-section class="col flex flex-center">
            <q-btn
              color="primary"
              icon="add"
              label="添加账号"
              unelevated
              outline
              flat
              to="/payment"
            />
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</template>

<script>
import { useQuasar } from "quasar";
import { getAvatar } from "src/assets/utils";
import AccountItem from "src/components/items/AccountItem.vue";
import { defineComponent, reactive } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  components: { AccountItem },
  name: "PagesAccountsPageVue",
  setup() {
    const $q = useQuasar();
    const $store = useStore();
    $store.dispatch("persisted/syncAccounts");
    const data = reactive({});

    return {
      data,
      getAvatar,
    };
  },
});
</script>
